<template>
  <div v-loading="loading" class="departments">
    <el-card class="box-card">
      <!-- 上面这一行 -->
      <tree-tool
        :node-info="company"
        is-root
        @click-add="showAddDialog"
      />
      <!-- 分割线 -->
      <el-divider />

      <!-- 这里放tree -->
      <!--
        :data 绑定数据
        show-checkbox 如果有这个属性代表有多选框（本项目不需要）
        node-key： 指定用哪个属性做每个节点的key（身份标识）
        default-expand-all：是否默认展开所有
        :expand-on-click-node="false" 是否要点击节点展开或折叠，如果为false代表只能点左边三角形展开和折叠
       -->
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <!-- 作用域插槽，slot-scope是一个废弃的语法 -->
        <!-- 新语法：要用template包起来，然后写 v-slot="{ node, data }" -->
        <tree-tool
          slot-scope="{ data }"
          :node-info="data"
          @refresh="loadData"
          @click-add="showAddDialog"
          @click-edit="showEdit"
        />
      </el-tree>

      <!-- 新增或编辑的对话框 -->
      <!-- $event用在原生标签中代表事件对象 -->
      <!-- $event用在组件中，代表组件传递过来的值 -->
      <!-- <add-dept :showDialog="showDialog" :pid="currentId" @update:showDialog="showDialog = $event"/> -->

      <!--
        语法糖：
          写少量代码系统在运行时自动生成大量代码
          就好比 v-model="msg"  他就是一个语法糖，相当于帮我们生成了 :value="msg" @input="msg=$event"

          :showDialog.sync="showDiaglog" 它除了做父传子（也就是 :showDialog="showDialog"）以外，还帮你生成了
              @update:showDialog="showDialog = $event"
            它相当于是另外一种`v-model`
       -->
      <add-dept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :pid="currentId"
        @reload="loadData"
      />
    </el-card>
  </div>
</template>

<script>
// 导入组件
import TreeTool from './components/TreeTool.vue'
import AddDept from './components/AddDept.vue'
// 导入接口
import { getDepts } from '@/api/departments'
// 导入递归转树的工具函数
import { arrayToTree } from '@/utils'

export default {
  name: 'Departments',
  components: {
    TreeTool,
    AddDept
  },
  data() {
    return {
      loading: true,
      company: {
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      data: [],
      // 用来控制对话框的显示和隐藏
      showDialog: false,
      // 用来保存当前要添加子部门的id
      currentId: ''
    }
  },
  // 页面打开就发请求
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // 获取部门列表
      const res = await getDepts()
      // 1. 找到所有节点
      const list = arrayToTree(res.data.depts, '')
      this.data = list

      // 关闭加载动画
      this.loading = false
    },

    // 当点击添加子部门触发
    showAddDialog(id) {
      // 显示出对话框
      this.showDialog = true
      // 把id保存到变量
      this.currentId = id
    },

    // 当点击了查看部门触发
    async showEdit(id) {
      // 显示出对话框前要发请求拿到数据
      await this.$refs.addDept.getDetail(id)
      // 要等拿到数据再显示出对话框
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  .box-card {
    margin: 20px;
    padding: 140px 120px;
  }
}
</style>
